<template>
  <div class="product-detail-page">
    <div class="page-header">
      <div class="header-left">
        <el-button text @click="handleBack">
          <el-icon><ArrowLeft /></el-icon>
          返回
        </el-button>
        <h2>商品详情</h2>
        <el-tag :type="product.status === '启用' ? 'success' : 'danger'">
          {{ product.status }}
        </el-tag>
      </div>
      <div class="header-actions">
        <el-button @click="handlePrint">
          <el-icon><Printer /></el-icon>
          打印
        </el-button>
        <el-button @click="handleQRCode">
          <el-icon><Postcard /></el-icon>
          生成二维码
        </el-button>
        <el-button type="primary" @click="handleEdit">
          <el-icon><Edit /></el-icon>
          编辑
        </el-button>
      </div>
    </div>

    <el-row :gutter="20">
      <el-col :span="16">
        <!-- 基本信息 -->
        <el-card class="info-card">
          <template #header>
            <span>基本信息</span>
          </template>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="product-image">
                <el-image
                  :src="product.image"
                  fit="cover"
                  :preview-src-list="[product.image]"
                />
              </div>
            </el-col>
            <el-col :span="16">
              <el-descriptions :column="2" border>
                <el-descriptions-item label="商品编码">{{ product.code }}</el-descriptions-item>
                <el-descriptions-item label="商品名称">{{ product.name }}</el-descriptions-item>
                <el-descriptions-item label="分类">
                  <el-tag>{{ product.category }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="规格">{{ product.specification }}</el-descriptions-item>
                <el-descriptions-item label="单位">{{ product.unit }}</el-descriptions-item>
                <el-descriptions-item label="品牌">{{ product.brand || '-' }}</el-descriptions-item>
              </el-descriptions>
            </el-col>
          </el-row>
        </el-card>

        <!-- 价格信息 -->
        <el-card class="info-card">
          <template #header>
            <span>价格信息</span>
          </template>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-statistic title="采购价" :value="product.purchasePrice" prefix="¥" :precision="2" />
            </el-col>
            <el-col :span="8">
              <el-statistic title="销售价" :value="product.salePrice" prefix="¥" :precision="2" />
            </el-col>
            <el-col :span="8">
              <el-statistic title="毛利率" :value="profitMargin" suffix="%" :precision="1" />
            </el-col>
          </el-row>
        </el-card>

        <!-- 库存信息 -->
        <el-card class="info-card">
          <template #header>
            <span>库存信息</span>
          </template>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-statistic title="当前库存" :value="product.stock" />
            </el-col>
            <el-col :span="6">
              <el-statistic title="可用库存" :value="product.availableStock || product.stock" />
            </el-col>
            <el-col :span="6">
              <el-statistic title="在途库存" :value="product.inTransitStock || 0" />
            </el-col>
            <el-col :span="6">
              <el-statistic title="安全库存" :value="product.safetyStock || 10" />
            </el-col>
          </el-row>
        </el-card>

        <!-- 商品属性 -->
        <el-card class="info-card">
          <template #header>
            <span>商品属性</span>
          </template>
          <el-table :data="productAttributes" stripe>
            <el-table-column prop="name" label="属性名称" />
            <el-table-column prop="value" label="属性值" />
          </el-table>
        </el-card>
      </el-col>

      <el-col :span="8">
        <!-- 快速操作 -->
        <el-card class="info-card">
          <template #header>
            <span>快速操作</span>
          </template>
          <div class="quick-actions">
            <el-button type="primary" block @click="handleStockIn">
              <el-icon><Plus /></el-icon>
              入库
            </el-button>
            <el-button type="warning" block @click="handleStockOut">
              <el-icon><Minus /></el-icon>
              出库
            </el-button>
            <el-button type="success" block @click="handleStockCheck">
              <el-icon><CircleCheck /></el-icon>
              盘点
            </el-button>
            <el-button type="danger" block @click="handlePriceAdjust">
              <el-icon><Money /></el-icon>
              调价
            </el-button>
          </div>
        </el-card>

        <!-- 操作记录 -->
        <el-card class="info-card">
          <template #header>
            <span>操作记录</span>
          </template>
          <el-timeline>
            <el-timeline-item
              v-for="log in operationLogs"
              :key="log.id"
              :timestamp="log.time"
              size="small"
            >
              <strong>{{ log.user }}</strong> {{ log.action }}
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  ArrowLeft, Printer, Postcard, Edit, Plus, Minus,
  CircleCheck, Money
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

const product = ref({
  id: 1,
  code: 'P001',
  name: 'iPhone 15',
  category: '电子产品',
  specification: '128GB 黑色',
  unit: '台',
  brand: 'Apple',
  purchasePrice: 5000,
  salePrice: 5999,
  stock: 25,
  availableStock: 20,
  inTransitStock: 5,
  safetyStock: 10,
  status: '启用',
  image: 'https://via.placeholder.com/300x300/409EFF/FFFFFF?text=iPhone15',
  description: '苹果最新款手机'
})

const productAttributes = ref([
  { name: '颜色', value: '黑色' },
  { name: '存储', value: '128GB' },
  { name: '屏幕尺寸', value: '6.1英寸' },
  { name: '重量', value: '171克' }
])

const operationLogs = ref([
  { id: 1, user: '张三', action: '调整了商品价格', time: '2024-10-14 10:00' },
  { id: 2, user: '李四', action: '入库 10 台', time: '2024-10-13 14:20' },
  { id: 3, user: '王五', action: '创建了商品', time: '2024-10-01 09:00' }
])

const profitMargin = computed(() => {
  if (!product.value.purchasePrice || !product.value.salePrice) return 0
  return ((product.value.salePrice - product.value.purchasePrice) / product.value.purchasePrice * 100)
})

const handleBack = () => router.back()
const handlePrint = () => window.print()
const handleQRCode = () => ElMessage.info('二维码生成功能开发中')
const handleEdit = () => router.push(`/inventory/products/edit/${product.value.id}`)
const handleStockIn = () => ElMessage.info('入库功能开发中')
const handleStockOut = () => ElMessage.info('出库功能开发中')
const handleStockCheck = () => ElMessage.info('盘点功能开发中')
const handlePriceAdjust = () => ElMessage.info('调价功能开发中')
</script>

<style scoped>
.product-detail-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 8px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.header-left h2 {
  margin: 0;
  font-size: 20px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.info-card {
  margin-bottom: 20px;
}

.product-image {
  width: 100%;
  height: 200px;
}

.product-image .el-image {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
</style>

